<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>业力分析报表</a-breadcrumb-item>
      <a-breadcrumb-item>业力分布图表</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">业力分布图表</div>
        <div class="header-subtitle">阴曹地府 · 业力层次分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card distribution-stat">
            <div class="stat-icon">
              <FundOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均业力值</div>
              <div class="stat-value">{{ averageKarma }}</div>
              <div class="stat-label">分</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card variance-stat">
            <div class="stat-icon">
              <DotChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">业力方差</div>
              <div class="stat-value">{{ karmaVariance }}</div>
              <div class="stat-label">标准差</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card peak-stat">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">最高业力值</div>
              <div class="stat-value">{{ maxKarma }}</div>
              <div class="stat-label">分</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card distribution-type-stat">
            <div class="stat-icon">
              <StockOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">分布类型</div>
              <div class="stat-value">{{ distributionType }}</div>
              <div class="stat-label">正态分布</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 业力分布直方图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="业力值分布直方图" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="histogramInterval" style="width: 120px">
                <a-select-option value="500">500分间隔</a-select-option>
                <a-select-option value="1000">1000分间隔</a-select-option>
                <a-select-option value="2000">2000分间隔</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="karmaHistogramOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 业力雷达分布图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="业力维度雷达图" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="karmaRadarOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 业力散点分布 -->
        <a-col :xs="24" :lg="12">
          <a-card title="年龄-业力散点图" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="scatterGender" style="width: 100px">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="male">男性</a-select-option>
                  <a-select-option value="female">女性</a-select-option>
                </a-select>
                <a-button @click="refreshScatterData">
                  <ReloadOutlined />
                </a-button>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="ageKarmaScatterOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 业力等级金字塔 -->
        <a-col :xs="24" :lg="12">
          <a-card title="业力等级金字塔" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="karmaPyramidOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 业力分布热力图 -->
        <a-col :xs="24">
          <a-card title="职业-地区业力分布热力图" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="heatmapMetric" style="width: 120px">
                  <a-select-option value="average">平均值</a-select-option>
                  <a-select-option value="median">中位数</a-select-option>
                  <a-select-option value="max">最大值</a-select-option>
                </a-select>
                <a-button @click="exportHeatmapData">
                  <DownloadOutlined />
                  导出
                </a-button>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="jobRegionHeatmapOption" style="height: 500px" />
            </div>
          </a-card>
        </a-col>

        <!-- 业力分布统计表 -->
        <a-col :xs="24" :lg="16">
          <a-card title="业力分布统计表" :bordered="false" class="table-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="tableView" style="width: 120px">
                  <a-select-option value="range">区间统计</a-select-option>
                  <a-select-option value="occupation">职业统计</a-select-option>
                  <a-select-option value="region">地区统计</a-select-option>
                </a-select>
                <a-button @click="exportTableData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
              </a-space>
            </template>
            <a-table :columns="currentTableColumns" :data-source="currentTableData" :pagination="{ pageSize: 10 }" size="small" />
          </a-card>
        </a-col>

        <!-- 业力分布分析 -->
        <a-col :xs="24" :lg="8">
          <a-card title="分布分析报告" :bordered="false" class="analysis-card">
            <div class="analysis-content">
              <div class="analysis-section">
                <h4>分布特征</h4>
                <div class="feature-list">
                  <div class="feature-item">
                    <span class="feature-label">偏度系数</span>
                    <span class="feature-value">{{ skewness }}</span>
                  </div>
                  <div class="feature-item">
                    <span class="feature-label">峰度系数</span>
                    <span class="feature-value">{{ kurtosis }}</span>
                  </div>
                  <div class="feature-item">
                    <span class="feature-label">众数</span>
                    <span class="feature-value">{{ mode }}</span>
                  </div>
                  <div class="feature-item">
                    <span class="feature-label">中位数</span>
                    <span class="feature-value">{{ median }}</span>
                  </div>
                </div>
              </div>

              <div class="analysis-section">
                <h4>分布趋势</h4>
                <div class="trend-chart">
                  <v-chart :option="miniTrendOption" style="height: 120px" />
                </div>
              </div>

              <div class="analysis-section">
                <h4>关键洞察</h4>
                <ul class="insights-list">
                  <li>高业力群体主要集中在45-65岁年龄段</li>
                  <li>教育、医疗行业业力值普遍较高</li>
                  <li>发达地区业力分布更加均衡</li>
                  <li>年轻群体业力值呈上升趋势</li>
                  <li>传统文化地区善行比例更高</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { FundOutlined, DotChartOutlined, RiseOutlined, StockOutlined, ReloadOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, ScatterChart, RadarChart, HeatmapChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, BarChart, ScatterChart, RadarChart, HeatmapChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const histogramInterval = ref('1000')
const scatterGender = ref('all')
const heatmapMetric = ref('average')
const tableView = ref('range')

// 核心指标数据
const averageKarma = ref('4,235')
const karmaVariance = ref('2,847')
const maxKarma = ref('98,750')
const distributionType = ref('偏正态')
const skewness = ref('0.32')
const kurtosis = ref('2.85')
const mode = ref('3,850')
const median = ref('4,180')

// 业力分布直方图
const karmaHistogramOption = computed(() => {
  const ranges = ['< -5000', '-5000~-2000', '-2000~-500', '-500~0', '0~500', '500~2000', '2000~5000', '5000~10000', '10000~20000', '> 20000']
  const counts = [2890, 8450, 15680, 28900, 45200, 89600, 124800, 67300, 25400, 8950]

  return {
    title: {
      text: '业力值分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{b}<br/>人数: {c}'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ranges,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999', rotate: 45 }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '人数分布',
        type: 'bar',
        data: counts,
        itemStyle: {
          color: function (params) {
            const value = params.dataIndex
            if (value <= 3) return '#ff4d4f' // 负业力
            if (value <= 4) return '#faad14' // 接近零
            if (value <= 6) return '#52c41a' // 正业力
            if (value <= 7) return '#1890ff' // 高业力
            return '#722ed1' // 极高业力
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 业力雷达图
const karmaRadarOption = computed(() => {
  return {
    title: {
      text: '业力维度分析',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['平均水平', '优秀群体', '改进群体'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    radar: {
      indicator: [
        { name: '慈悲心', max: 100 },
        { name: '诚实度', max: 100 },
        { name: '勇敢度', max: 100 },
        { name: '智慧值', max: 100 },
        { name: '责任感', max: 100 },
        { name: '自制力', max: 100 },
        { name: '感恩心', max: 100 },
        { name: '正义感', max: 100 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
        }
      },
      axisLine: { lineStyle: { color: '#666' } },
      splitLine: { lineStyle: { color: '#666' } }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [65, 70, 68, 72, 75, 69, 71, 74],
            name: '平均水平',
            lineStyle: { color: '#1890ff' },
            areaStyle: { color: 'rgba(24, 144, 255, 0.3)' }
          },
          {
            value: [88, 92, 85, 90, 94, 87, 91, 89],
            name: '优秀群体',
            lineStyle: { color: '#52c41a' },
            areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
          },
          {
            value: [35, 42, 38, 45, 40, 36, 44, 41],
            name: '改进群体',
            lineStyle: { color: '#ff7875' },
            areaStyle: { color: 'rgba(255, 120, 117, 0.3)' }
          }
        ]
      }
    ]
  }
})

// 年龄业力散点图
const ageKarmaScatterOption = computed(() => {
  // 生成散点数据
  const generateScatterData = (count) => {
    const data = []
    for (let i = 0; i < count; i++) {
      const age = Math.floor(Math.random() * 70 + 18) // 18-88岁
      const karma = Math.floor(Math.random() * 40000 - 10000) // -10000到30000
      data.push([age, karma])
    }
    return data
  }

  return {
    title: {
      text: '年龄与业力值分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '年龄: {c[0]}岁<br/>业力值: {c[1]}分'
    },
    grid: {
      left: '3%',
      right: '7%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '年龄',
      min: 15,
      max: 90,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    yAxis: {
      type: 'value',
      name: '业力值',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    visualMap: {
      min: -10000,
      max: 30000,
      dimension: 1,
      orient: 'vertical',
      right: 10,
      top: 'center',
      text: ['高', '低'],
      calculable: true,
      inRange: {
        color: ['#ff4d4f', '#faad14', '#52c41a', '#1890ff', '#722ed1']
      }
    },
    series: [
      {
        name: '业力分布',
        type: 'scatter',
        data: generateScatterData(1000),
        symbolSize: function (data) {
          return Math.max(Math.abs(data[1]) / 2000, 2)
        },
        emphasis: {
          focus: 'series'
        }
      }
    ]
  }
})

// 业力等级金字塔
const karmaPyramidOption = computed(() => {
  const levels = ['极恶级', '恶人级', '普通级', '善人级', '圣人级']
  const maleCounts = [-2890, -12340, -38950, -89420, -25680]
  const femaleCounts = [2650, 11280, 35670, 82340, 23480]

  return {
    title: {
      text: '业力等级人口金字塔',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: function (params) {
        const maleValue = Math.abs(params[0].value)
        const femaleValue = params[1].value
        return `${params[0].axisValue}<br/>男性: ${maleValue}<br/>女性: ${femaleValue}`
      }
    },
    legend: {
      data: ['男性', '女性'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: {
        color: '#999',
        formatter: function (value) {
          return Math.abs(value / 1000) + 'K'
        }
      },
      splitLine: { lineStyle: { color: '#333' } }
    },
    yAxis: {
      type: 'category',
      data: levels,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'total',
        data: maleCounts,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#4facfe' },
              { offset: 1, color: '#00f2fe' }
            ]
          }
        }
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'total',
        data: femaleCounts,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#ff9a9e' },
              { offset: 1, color: '#fecfef' }
            ]
          }
        }
      }
    ]
  }
})

// 职业地区热力图
const jobRegionHeatmapOption = computed(() => {
  const jobs = ['教师', '医生', '公务员', '企业家', '工人', '农民', '学生', '退休人员']
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const data = []

  for (let i = 0; i < jobs.length; i++) {
    for (let j = 0; j < regions.length; j++) {
      const value = Math.floor(Math.random() * 8000 + 2000)
      data.push([i, j, value])
    }
  }

  return {
    title: {
      text: '职业-地区业力分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      position: 'top',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: function (params) {
        return `${jobs[params.data[0]]}-${regions[params.data[1]]}<br/>平均业力: ${params.data[2]}分`
      }
    },
    grid: {
      height: '60%',
      top: '15%'
    },
    xAxis: {
      type: 'category',
      data: jobs,
      splitArea: { show: true },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'category',
      data: regions,
      splitArea: { show: true },
      axisLabel: { color: '#999' }
    },
    visualMap: {
      min: 2000,
      max: 10000,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '5%',
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
      }
    },
    series: [
      {
        name: '业力值',
        type: 'heatmap',
        data: data,
        label: {
          show: true,
          color: '#fff'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 小趋势图
const miniTrendOption = computed(() => {
  const data = [3850, 3920, 4050, 4180, 4235, 4310, 4285, 4390, 4450, 4520]

  return {
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: {
      type: 'category',
      show: false,
      data: ['', '', '', '', '', '', '', '', '', '']
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        type: 'line',
        data: data,
        smooth: true,
        lineStyle: { color: '#d4990a', width: 2 },
        showSymbol: false,
        areaStyle: { color: 'rgba(212, 153, 10, 0.3)' }
      }
    ]
  }
})

// 表格列配置
const rangeColumns = [
  { title: '业力区间', dataIndex: 'range', key: 'range', width: 120 },
  { title: '人数', dataIndex: 'count', key: 'count', width: 100, sorter: (a, b) => a.count - b.count },
  { title: '占比', dataIndex: 'percentage', key: 'percentage', width: 80 },
  { title: '累计占比', dataIndex: 'cumulative', key: 'cumulative', width: 100 },
  { title: '平均值', dataIndex: 'average', key: 'average', width: 100 },
  { title: '标准差', dataIndex: 'stdDev', key: 'stdDev', width: 100 }
]

const occupationColumns = [
  { title: '职业', dataIndex: 'occupation', key: 'occupation', width: 100 },
  { title: '平均业力', dataIndex: 'avgKarma', key: 'avgKarma', width: 100, sorter: (a, b) => a.avgKarma - b.avgKarma },
  { title: '中位数', dataIndex: 'median', key: 'median', width: 100 },
  { title: '最高值', dataIndex: 'max', key: 'max', width: 100 },
  { title: '最低值', dataIndex: 'min', key: 'min', width: 100 },
  { title: '人数', dataIndex: 'count', key: 'count', width: 80 }
]

const regionColumns = [
  { title: '地区', dataIndex: 'region', key: 'region', width: 100 },
  { title: '平均业力', dataIndex: 'avgKarma', key: 'avgKarma', width: 100, sorter: (a, b) => a.avgKarma - b.avgKarma },
  { title: '善行比例', dataIndex: 'goodRatio', key: 'goodRatio', width: 100 },
  { title: '恶行比例', dataIndex: 'evilRatio', key: 'evilRatio', width: 100 },
  { title: '人口密度', dataIndex: 'density', key: 'density', width: 100 },
  { title: '发展指数', dataIndex: 'developmentIndex', key: 'developmentIndex', width: 100 }
]

// 表格数据
const rangeTableData = ref([
  { key: 1, range: '< -5000', count: 2890, percentage: '0.7%', cumulative: '0.7%', average: -7250, stdDev: 1580 },
  { key: 2, range: '-5000~-2000', count: 8450, percentage: '2.0%', cumulative: '2.7%', average: -3485, stdDev: 890 },
  { key: 3, range: '-2000~-500', count: 15680, percentage: '3.7%', cumulative: '6.4%', average: -1185, stdDev: 420 },
  { key: 4, range: '-500~0', count: 28900, percentage: '6.8%', cumulative: '13.2%', average: -245, stdDev: 145 },
  { key: 5, range: '0~500', count: 45200, percentage: '10.7%', cumulative: '23.9%', average: 248, stdDev: 142 },
  { key: 6, range: '500~2000', count: 89600, percentage: '21.1%', cumulative: '45.0%', average: 1265, stdDev: 435 },
  { key: 7, range: '2000~5000', count: 124800, percentage: '29.4%', cumulative: '74.4%', average: 3485, stdDev: 865 },
  { key: 8, range: '5000~10000', count: 67300, percentage: '15.9%', cumulative: '90.3%', average: 7250, stdDev: 1450 },
  { key: 9, range: '10000~20000', count: 25400, percentage: '6.0%', cumulative: '96.3%', average: 14650, stdDev: 2850 },
  { key: 10, range: '> 20000', count: 8950, percentage: '2.1%', cumulative: '98.4%', average: 32500, stdDev: 8950 }
])

const occupationTableData = ref([
  { key: 1, occupation: '教师', avgKarma: 6850, median: 6420, max: 25680, min: -850, count: 89600 },
  { key: 2, occupation: '医生', avgKarma: 7250, median: 6890, max: 32450, min: -420, count: 67800 },
  { key: 3, occupation: '公务员', avgKarma: 5680, median: 5320, max: 18950, min: -1250, count: 124500 },
  { key: 4, occupation: '企业家', avgKarma: 4850, median: 4520, max: 89650, min: -8950, count: 45200 },
  { key: 5, occupation: '工人', avgKarma: 3420, median: 3180, max: 15680, min: -2850, count: 256800 },
  { key: 6, occupation: '农民', avgKarma: 4280, median: 4050, max: 18500, min: -1680, count: 189400 },
  { key: 7, occupation: '学生', avgKarma: 2850, median: 2650, max: 12450, min: -3250, count: 198600 },
  { key: 8, occupation: '退休人员', avgKarma: 5950, median: 5680, max: 28950, min: -850, count: 134200 }
])

const regionTableData = ref([
  { key: 1, region: '华东地区', avgKarma: 5650, goodRatio: '72.5%', evilRatio: '27.5%', density: '高', developmentIndex: 0.89 },
  { key: 2, region: '华南地区', avgKarma: 5420, goodRatio: '71.2%', evilRatio: '28.8%', density: '高', developmentIndex: 0.87 },
  { key: 3, region: '华北地区', avgKarma: 4950, goodRatio: '68.9%', evilRatio: '31.1%', density: '中', developmentIndex: 0.82 },
  { key: 4, region: '华中地区', avgKarma: 4680, goodRatio: '67.3%', evilRatio: '32.7%', density: '中', developmentIndex: 0.78 },
  { key: 5, region: '西南地区', avgKarma: 4350, goodRatio: '65.8%', evilRatio: '34.2%', density: '低', developmentIndex: 0.74 },
  { key: 6, region: '东北地区', avgKarma: 4120, goodRatio: '64.2%', evilRatio: '35.8%', density: '中', developmentIndex: 0.71 },
  { key: 7, region: '西北地区', avgKarma: 3950, goodRatio: '63.5%', evilRatio: '36.5%', density: '低', developmentIndex: 0.68 }
])

// 计算属性
const currentTableColumns = computed(() => {
  switch (tableView.value) {
    case 'occupation':
      return occupationColumns
    case 'region':
      return regionColumns
    default:
      return rangeColumns
  }
})

const currentTableData = computed(() => {
  switch (tableView.value) {
    case 'occupation':
      return occupationTableData.value
    case 'region':
      return regionTableData.value
    default:
      return rangeTableData.value
  }
})

// 方法
const refreshScatterData = () => {
  message.success('散点图数据已刷新')
}

const exportHeatmapData = () => {
  message.success('热力图数据导出成功')
}

const exportTableData = () => {
  message.success('统计表数据导出成功')
}

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.distribution-stat .stat-icon {
  color: #1890ff;
}
.variance-stat .stat-icon {
  color: #faad14;
}
.peak-stat .stat-icon {
  color: #52c41a;
}
.distribution-type-stat .stat-icon {
  color: #722ed1;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head),
.table-card :deep(.ant-card-head),
.analysis-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title),
.table-card :deep(.ant-card-head-title),
.analysis-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body),
.table-card :deep(.ant-card-body),
.analysis-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
}

.analysis-content {
  color: #fff;
}

.analysis-section {
  margin-bottom: 24px;
}

.analysis-section h4 {
  color: #d4990a;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.feature-list {
  margin-bottom: 16px;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-label {
  color: #b3c5d1;
  font-size: 14px;
}

.feature-value {
  color: #d4990a;
  font-weight: 600;
  font-size: 14px;
}

.trend-chart {
  margin-bottom: 16px;
}

.insights-list {
  list-style: none;
  padding: 0;
}

.insights-list li {
  padding: 6px 0;
  border-left: 3px solid #d4990a;
  padding-left: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #b3c5d1;
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d4990a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(255, 255, 255, 0.1) !important;
}
</style>
